<template>
  <div>
    <van-pull-refresh v-model="isRefreshLoading" @refresh="onRefresh">
      <van-list
        v-model="isMoreLoading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoadMore"
      >
        <div class="xj-home">
          <baidu-map id="allmap" class="allmap" @ready="handler"></baidu-map>
          <van-swipe class="xj-swipe" :autoplay="3000" indicator-color="orange">
            <van-swipe-item v-for="(item, index) in slideImgList" :key="index">
              <img v-lazy="publicUrl + item.filepath" width="100%">
            </van-swipe-item>
          </van-swipe>
          <!-- <div @click="$toast('功能未开放')" class='search'>搜索店铺、商品</div> -->
          <div @click="handlerChooesCity" class='city'>
              {{currentCity || '定位中'}}
              <span class="iconfont icon-lujing9" style="font-size: 12px;"></span>
          </div>
          <van-swipe class="xj-category" indicator-color="orange">
            <van-swipe-item v-for="(cateItem, index) in shopCateList" :key="index">
              <ul>
                <li  v-for="(item, indexItem) in cateItem" :key="indexItem" @click="jump('shopList',{cid:item.id})">
                  <div class="xj-img">
                    <!-- <img :loading="defaultStoreImg" v-lazy="publicUrl + item.filepath" alt=""> -->
                    <van-image :src="publicUrl + item.filepath" lazy-load />
                  </div>
                  <span>{{item.name}}</span>
                </li>
              </ul>
            </van-swipe-item>
          </van-swipe>

          <div class="xj-recommend"> — 推荐商家 — </div>
          <van-swipe :autoplay="3000" :show-indicators='false' class='xj-swipe-commend'>
            <van-swipe-item v-for="(recoShopItem, recoShopIndex) in recoShopList" :key="recoShopIndex">
              <ul>
                <li  v-for="(item, index) in recoShopItem" :key="index"  @click="jump('detail',{id:item.b_id})">
                  <div class="xj-commend">
                    <van-image lazy-load :src="publicUrl + item.filepath" alt="" />
                  </div>
                  <span>{{item.b_title}}</span>
                </li>
              </ul>
            </van-swipe-item>
          </van-swipe>
          <div class="xj-tab">
            <van-sticky :offset-top="0">
              <div class="xj-top">
                <ul>
                  <li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index" @click="getItme(index)">{{item.text}}
                  </li>
                  <li class="xj-right-fiexd" @click="get_in">商家入驻</li>
                </ul>
              </div>
            </van-sticky>

            <div class="xj-content">
              <div class="fujin" v-show='activeClass==activeClass'>
                <ul>
                  <li v-for="(item, index) in storeList" :key="index" @click="jump('detail',{id:item.b_id})">
                    <div class="left" @click="jump('detail',{id:item.b_id})">
                      <van-image class="xj-store-img" lazy-load :src="publicUrl +item.image" alt=""/>
                    </div>
                    <div class="right">
                      <div class="name" @click="jump('detail',{id:item.b_id})">{{item.b_title}}</div>
                      <div style="color:#ffd21e" @click="jump('detail',{id:item.b_id})">
                        <van-rate readonly size='14' style="float:left" v-model="item.score" allow-half void-icon="star" void-color="#eee" />
                        <span>{{(item.score/2).toFixed(1)}}</span>
                      </div>
                      <div class="distand" @click="jump('detail',{id:item.b_id})">
                        <span style="visibility: hidden;">0浏览</span>
                        <span style="float:right">{{(item.juli).toFixed(2)}}km</span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>

        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { getSlideImg, getShopCate, postShopList, postRecoShop } from '../../api/ajax'
export default {
  data: function () {
    return {
      activeClass: 0,
      itemList: [
        { text: '附近的店' },
        // { text: '人气排名' },
        // { text: '领券排名' },
      ],
      value: 4.5,
      slideImgList: [],
      shopCateList: [],
      storeList: [],
      recoShopList: [],
      currentCity: '',
      BMapData: {},
      isRefreshLoading: false,
      isMoreLoading: false,
      finished: false,
      total: 0
    }
  },
  methods: {
    onLoadMore() {
      if(JSON.parse(JSON.stringify(this.BMapData)) === '{}') {
        this.isMoreLoading = false;
      } else {
        this.postShopList(this.BMapData.point, '', this.currentCity);
      };
    },
    onRefresh() {
      if(JSON.parse(JSON.stringify(this.BMapData)) === '{}') {
        this.isRefreshLoading = false;
      } else {
        this.total = 0;
        this.finished = false;
        this.storeList = [];
        this.postShopList(this.BMapData.point, '', this.currentCity);
      };
    },
    handlerChooesCity() {
      this.jump('address');
    },
    getItme(index) {
      this.activeClass = index;  // 把当前点击元素的index，赋值给activeClass
    },
    go_company() {
      this.jump('detail');
    },
    get_in() {
      this.jump('addstore');
    },
    group(array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while (index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength));
      }
      return newArray;
    },
    async getSlideImg() {
      const result = await getSlideImg();
      if (!!result) {
        this.slideImgList = result;
        console.log(result);
      }
    },
    async getShopCate() {
      const result = await getShopCate();
      if (!!result) {
        this.shopCateList = this.group(result, 10)
        // console.log(this.shopCateList);
      }
    },
    async postShopList({ lat, lng }, order = '', city) {
      const result = await postShopList({
        lat,
        lng,
        order,
        city,
        total: this.total
      });
      this.isRefreshLoading = false;
      this.isMoreLoading = false;
      this.total += 10;
      if (!!result) {
        if (result) {
          result.forEach(element => {
            element.score = parseFloat(element.score || 0);
          });
          if(result.length === 0) {
            this.finished = true;
          }else {
            this.storeList = this.storeList.concat(result);
          }
        }
      }
    },
    async postRecoShop() {
      const result = await postRecoShop({});
      if(result) {
        this.recoShopList = this.group(result || [], 3)
      }
    },
    handler({ BMap, map }) {
      let locationPoint = this.$pcCookie.get('locationPoint') || '';
      let currentCity = this.$pcCookie.get('locationCity') || '';
      let pointData = {
        lng: locationPoint.split(',')[0],
        lat: locationPoint.split(',')[1]
      }
      this.loacl(BMap, map, (data) => {
        this.BMapData = data;
        this.currentCity = data.addressComponents.city;
        this.postShopList(data.point,'',currentCity || this.currentCity);
        if(currentCity && locationPoint) {
          this.currentCity = currentCity;
        }else {
          this.$pcCookie.set({
            key: "locationPoint",
            value: `${data.point.lng},${data.point.lat}`
          });
          this.$pcCookie.set({
            key: "locationCity",
            value: this.currentCity
          });
        }
      });
    },
  },
  mounted() {
    this.getSlideImg();
    this.getShopCate();
    this.postRecoShop();
  }
};
</script>
<style lang="scss" scoped>
.van-list {
  padding-bottom: 50px;
}
.xj-home {
  // background: red;
  position: relative;
  .xj-swipe {
    height: 50vw;
  }
  .xj-tab {
  }

  .search {
    background-color: rgba(167, 168, 171, 0.7);
    width: px2rem(130);
    height: px2rem(30);
    border-radius: px2rem(30);
    z-index: 9999;
    position: absolute;
    left: px2rem(17);
    top: px2rem(12);
    text-align: center;
    line-height: px2rem(30);
    color: white;
    font-size: px2rem(14);
  }
  .city {
    background-color: rgba(167, 168, 171, 0.7);
    height: px2rem(30);
    z-index: 9999;
    position: absolute;
    right: px2rem(17);
    top: px2rem(12);
    text-align: center;
    line-height: px2rem(30);
    color: white;
    font-size: px2rem(14);
    border-radius: px2rem(30);
    padding: 0px 8px;
  }
  //分类导航
  .xj-category {
    // height: px2rem(180);
    padding-bottom: 20px;
    .xj-img {
      img {
        width: 100%;
        height: 100%;
      }
    }
    li {
      width: 20%;
      height: 50%;
      // margin-left: px2rem(9);
      margin-top: px2rem(15);
      float: left;
      text-align: center;
      position: relative;
      line-height: px2rem(20);
      div {
        width: px2rem(42);
        height: px2rem(42);
        border-radius: 50%;
        margin: 0 auto;
        overflow: hidden;
      }
    }
  }

  //
  .xj-recommend {
    height: px2rem(30);
    color: #242424;
    text-align: center;
    line-height: px2rem(30);
    font-size: px2rem(15);
  }
  .xj-swipe-commend {
    li {
      float: left;
      width: 33.33333333333333%;
      height: px2rem(120);
      line-height: px2rem(25);
      text-align: center;
      color: #5e5e5e;
    }
    .xj-commend {
      width: px2rem(80);
      height: px2rem(80);
      margin: 5px auto;
      border-radius: px2rem(10);
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
      }
    }
  }
  .xj-top {
    background-color: #fff;
    height: px2rem(33);
    // margin-top: px2rem(20);
    text-align: center;
    font-size: px2rem(14);
    font-weight: bold;
    border-top: 1px #eeeeee solid;
    border-bottom: 1px #eeeeee solid;
    padding-top: 12px;
    position: relative;
    li {
      height: px2rem(25);
      color: #5e5e5e;
      float: left;
      width: 25%;
      line-height: px2rem(25);
    }
    li:last-child {
      color: white;
      background-color: orange;
      border-radius: px2rem(25);
      margin: auto auto;
    }
    .active {
      color: orange;
    }
    .xj-right-fiexd {
      position: absolute;
      right: px2rem(15);
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .xj-content {
    background-color: #fff;
    // padding-bottom: px2rem(45);
    .fujin {

    }
    .xj-store-img {
      width: 100%;
      height: 100%;
    }
    li {
      width: 100%;
      // background-color: red;
      border-bottom: px2rem(5) #f4f4f4 solid;
      position: relative;
      .left {
        position: absolute;
        left: px2rem(15);
        top: px2rem(15);
        height: px2rem(65);
        width: px2rem(65);
        border-radius: px2rem(5);
        overflow: hidden;
      }
      .right {
        // float: left;
        // width: 80%;
        padding-top: px2rem(12);
        padding-left: px2rem(95);
        padding-right: px2rem(15);
        .name {
          margin-bottom: px2rem(5);
          font-weight: bold;
          font-size: px2rem(16);
        }
        div:nth-child(2) {
          position: relative;
          overflow: hidden;
          span {
            // position:absolute;
            float: left;
            // left: 25%;
            // display: block;
            // top: px2rem(-2);
            padding-left: px2rem(3);
            // padding-top:  px2rem(5);
            font-size: px2rem(14);
          }
        }
        .distand {
          padding-top: px2rem(5);
          padding-bottom: px2rem(4);
          border-bottom: px2rem(1) #f3f3f3 solid;
          color: #838182;
        }
        .news {
          div {
            line-height: px2rem(32);
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 60%;
          }
          span:last-child {
            line-height: px2rem(32);
            float: right;
          }
        }
      }
    }
  }
}
</style>
